<template>
  <view class="container">
    <!--  课程搜索-->
    <uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @clear="clear"
                    placeholder="请输入教师、课程以及班级名称进行搜索" bgColor="#fff">
    </uni-search-bar>
    <!--课程列表-->
    <uni-list :border="true">
      <uni-list-chat v-for="(itm, index) in courseList" :key="index"
                     :title="itm.ntitle" :note="itm.truename + '｜' + itm.ctitle"  :time="itm.sktime + '第'+itm.jieci+'节次'"
                     :clickable=true @click="chooseCourse(itm.id)">
      </uni-list-chat>
    </uni-list>

    <!-- 暂无数据的标识 -->
    <view class="no-data" v-if="noData">暂无上课信息</view>
    <!-- 加载更多按钮 -->
    <button v-else-if="hasMore" @click="loadMore" class="more">加载更多</button>
    <!-- 没有更多数据提示 -->
    <view class="more" v-else>没有更多数据了</view>
  </view>
</template>

<script>
import {isLogin} from '../../../utils/auth';
import {selectCourseList} from "@/api/course";

export default {
	data() {
		return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数据量
      searchValue: "", // 搜索的内容
      hasMore: true, // 是否还有更多数据
      courseList:[],
			wh: '',
			swiperDotIndex: 0,
			noData: false,
		}
	},
	onLoad() {
		isLogin(this);
    //获取可听的课程
    this.selectCourseList();
	},
	onBackPress() {
	},
	onReady() {
	},
	methods: {
    // 获取课程列表
    selectCourseList: function(){
      const selectParam = {
        page : this.currentPage,
        pageSize :this.pageSize,
        keyword : this.searchValue
      };
      selectCourseList(selectParam).then(response => {
        console.log(response);
        if(response.total == 0){
          this.noData = true;
        }else if(response.rows.length > 0 ){
          // 拼接课程列表
          this.courseList.push(...response.rows);
        }else{
          this.hasMore = false;
        }
      });
    },
    // 选择课程
    chooseCourse: function(teachRecordId) {
      console.log('chooseCourse');
      console.log(teachRecordId);
			uni.navigateTo({
				url: `/pages/eval/eval_1?teachRecordId=${teachRecordId}`,
			});
		},
    // 加载更多
    loadMore:function (){
      this.currentPage += 1;
      this.selectCourseList();
    },
    // 搜索、重置
    search(res) {
      this.currentPage = 1;
      this.courseList = [];
      this.selectCourseList();
    },
    clear(res) {
      console.log('clear');
    },
	}
}
</script>

<style>
page {
  background-color: #f8f8f8;
}
button {
  width: 100%;
}
.more{
  width:100%;
  text-align:center;
  font-size:14px;
  margin-top: 10px;
}
::v-deep .uni-list-chat__header-warp{
  display: none !important;
}
::v-deep .uni-list-chat__content-extra{
  max-width: 150px;
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 溢出内容隐藏 */
  text-overflow: ellipsis;
  text-align: left;
}
.no-data{
  width:100%;
  text-align:center;
}

</style>